<?php $this->headTitle('Expense Report');  ?>
<?php $this->headScript()->appendFile('js/jquery/ui/jquery.ui.widget.js'); ?>
<?php $this->headScript()->appendFile('js/jquery/ui/jquery.ui.datepicker.js'); ?>
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background-image: url('images/report.png');">Expense Report</h1>
  </div>
  <div class="content">
  <form action="<?php echo $this->url(array(),'reportExpense',true); ?>" method="post" enctype="multipart/form-data" id="reportForm">
    <div style="background: #E7EFEF; border: 1px solid #C6D7D7; padding: 3px; margin-bottom: 15px;">
      <table width="100%" cellspacing="0" cellpadding="6">
        <tr>
          <td>Start Date (Expense Date)<br />
            <input type="text" name="startDate" value="" id="startDate" size="12" style="margin-top: 4px;" /></td>
          <td>End Date (Expense Date)<br />
            <input type="text" name="endDate" value="" id="endDate" size="12" style="margin-top: 4px;" /></td>

          <td align="right"><a onclick="$('#reportForm').submit();" class="button"><span>Generate Report</span></a></td>
        </tr>
      </table>
    </div>
  </form>
  </div>
</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
	$('#startDate').datepicker({dateFormat: 'dd-mm-yy'});

	$('#endDate').datepicker({dateFormat: 'dd-mm-yy'});
});
//-->
</script>